<template>
	<view class="cart">
		<navbar title="购物车" mode="normalDrawer" @drawer="drawer"></navbar>
		<scroll-view scroll-y="true" class="scroll">
			<cart-list @getSelectList="getSelectList" v-if="canshow"></cart-list>
		</scroll-view>
		<view v-if="selectGoodsList.length != 0" class="bottom_bar">
			<view class="box">
				<view class="text">
					总计：<text class="price">{{allPrice}}</text>￥
				</view>
				<button hover-class="bottom-down" class="buttom" @click="toPay">结算</button>
			</view>
		</view>
		<uni-drawer ref="showDrawer">
			<drawer @exit="exit"></drawer>
		</uni-drawer>
		<uni-popup type="bottom" ref="pop_exit">
			<view class="box">
				<view class="text">确定要退出登录吗？</view>
				<view class="confirm" @click="exitC">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputStr: "",
				canshow: false,
				selectGoodsList: [],
				allPrice: ""
			}
		},
		methods: {
			exitC(){
				uni.clearStorage()
				this.$refs.pop_exit.close()
				uni.showToast({
					title:"退出登录成功~即将返回登录页"
				})
				setTimeout(function(){
					uni.hideToast()
					uni.redirectTo({
						url:"../../login/login"
					})
				},1000)
			},
			exit(){
				this.$refs.showDrawer.close()
				this.$refs.pop_exit.open()
			},
			drawer(){
				this.$refs.showDrawer.open()
			},
			input(str) {
				this.inputStr = str
			},
			getSelectList(data) {
				this.selectGoodsList = data
			},
			async toPay() {
				uni.showLoading({
				})
				var vue = this
				this.canshow = false
				var orderIdList = []
				//console.log(this.selectGoodsList);
				for (var i in this.selectGoodsList) {
					var item = this.selectGoodsList[i]
					var date = new Date()
					var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDay()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
					var reqBody = {
						userId: uni.getStorageSync("user").id, 
						goodsId: item.goodsId,
						goodsNum:item.count,
						allPrice:parseFloat(item.price)*item.count,
						time:dateStr,
						status:0
					}
					//console.log(reqBody);
					await this.$postRequst("order/add",reqBody).then(res=>{
						if(res.data.code == 200){
							orderIdList.push(res.data.data[0].id)
						}
					})
					reqBody = {
						userId:this.$getNowUser().id,
						goodsId:item.goodsId,
					}
					var allCart = []
					//通过userId和商品id查询购物车信息
					await this.$postRequst("cart/getOne",reqBody).then(res=>{
						allCart = res.data.data
					})
					//通过查到的购物车信息删除购物车
					for(var j in allCart){
						await this.$postRequst("cart/delete",{id:allCart[j].id}).then(res=>{
						})
					}
				}
				//刷新页面
				this.selectGoodsList = []
				uni.hideLoading()
				this.canshow = true
				uni.showModal({
					title:"提示",
					content:"创建订单成功~\n请去“我的”页面下方“待付款”分类中点击付款~\n超过30分钟未付款的订单会被自动取消哦~\n",
					showCancel:false,
					confirmText:"知道了"
				})
			}
		},
		watch: {
			selectGoodsList(data) {
				var allPrice = 0
				for (var i in data) {
					var price = parseFloat(data[i].price) * data[i].count
					allPrice += price
				}
				this.allPrice = allPrice.toFixed(2)
			}
		},
		onShow() {
			uni.showLoading({})
			var vue = this
			vue.canshow = false
			setTimeout(function() {
				vue.canshow = true
				uni.hideLoading()
			}, 1)
		}
	}
</script>

<style lang="scss">
	.cart {
		position: relative;
		height: 1334rpx;
		.box{
			width: 100%;
			height: 400rpx;
			background-color: #Fff;
			border-radius: 40rpx;
			//border: 4rpx red solid ;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: relative;
			.text{
				font-size: 40rpx;
				position: relative;
				
			}
			.confirm{
				font-size: 32rpx;
				position: absolute;
				bottom: 120rpx;
				right: 80rpx;
				color: $my-main-color;
			}
		}
		.scroll {
			//border: 2rpx red solid;
			height: 100%;
		}

		.bottom_bar {
			position: absolute;
			bottom: 100rpx;
			width: 100%;
			height: 100rpx;
			//border: 2rpx solid black;
			box-shadow: 0 -10rpx 10rpx #eeeeee;

			.box {
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				height: 100%;
				width: 100%;

				.buttom {
					height: 80%;
					width: 200rpx;
					position: absolute;
					right: 20rpx;
					font-size: 32rpx;
					background-color: #DD524D;
					color: #fff;
				}

				.bottom-down {
					height: 80%;
					width: 200rpx;
					position: absolute;
					right: 20rpx;
					font-size: 32rpx;
					background-color: #ac403c;
					color: #fff;
				}

				.text {
					position: absolute;
					left: 20rpx;
					font-size: 28rpx;

					.price {
						font-size: 36rpx;
						color: red;
						font-weight: bold;
					}
				}
			}

		}
	}
</style>
